<template>
    <div
        class="record"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <div class="record-box">
            <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
                <!-- tab0 还款操作 -->
                <el-tab-pane label="还款操作" name="first">
                    <el-form
                        :model="opForm"
                        :rules="oprules"
                        :inline="true"
                        ref="ruleForm"
                        label-width="80px"
                        class="demo-ruleForm form-group"
                        label-position="top"
                    >
                        <div class="title">还款配置</div>

                        <div class="bgf">
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="还款类型">
                                        
                                        <el-radio v-model="opForm.type" @change="radioChange()" :disabled="this.opFlag" label="0">一次性还款</el-radio>
                                        <el-radio v-model="opForm.type" @change="radioChange()" :disabled="this.opFlag" label="1">分期还款</el-radio>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="期数" prop="periods">
                                        <el-input v-model="opForm.periods" :disabled="this.opFlag"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="分期还款日(每月)" prop="dueDate" >

                                        <el-input v-model="opForm.dueDate"  :disabled="this.opFlag"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="开始还款月份" prop="startMonth">
                                        <el-date-picker v-model="opForm.startMonth" 
                                        type="month" placeholder="选择还款月份" value-format="yyyy-MM" :disabled="this.opFlag"> </el-date-picker>
                                        <!-- <el-input v-model="opForm.startMonth"></el-input> -->
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row v-if="!opFlag">
                                <el-col :span="6">
                                    <el-button type="primary" @click="opSave()" :disabled="this.opFlag">保存</el-button>
                                    <span style="margin-left: 15px">提示：保存后不可修改</span>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="title">还款操作</div>
                        <div class="bgf">

                             <el-button type="primary" @click="oprefundCheck()">已还款</el-button>

                            <!-- <el-checkbox v-model="refundChecked" @change="refundCheckedChange">已还款</el-checkbox> -->
                        </div>
                        <div class="title">还款情况</div>
                        <div class="bgf">
                            <LoanMangerDetailsList
                                tableRef="table"
                                ref="multipleTable"
                                :checkBoxEnable="false"
                                :data="dataList ? dataList : []"
                                :listConfig="resultColConfig"
                                :listLoading="listLoading"
                                @paginationChange="paginationChange"
                            ></LoanMangerDetailsList>
                        </div>
                    </el-form>
                </el-tab-pane>

                <!-- tab1 身份信息 -->
                <el-tab-pane label="填写身份信息" name="one">
                    <el-form
                        :model="cardForm"
                        :rules="cardrules"
                        :inline="true"
                        ref="ruleForm"
                        label-width="100px"
                        class="demo-ruleForm form-group"
                        label-position="top"
                    >
                        <div class="title">基本信息</div>
                        <div class="bgf">
                            <el-form-item label="姓名" prop="username">
                                <el-input type="text" v-model="cardForm.username" :disabled="true"></el-input>
                            </el-form-item>

                            <el-form-item label="身份证号" prop="idCard">
                                <el-input type="text" v-model="cardForm.idCard" :disabled="true"></el-input>
                            </el-form-item>

                            <el-form-item label="联系电话" prop="telephone">
                                <el-input type="text" v-model="cardForm.telephone" :disabled="true"></el-input>
                            </el-form-item>

                            <el-form-item label="户籍所在地" prop="register">
                                <el-input type="text" v-model="cardForm.register" :disabled="true"> </el-input>
                            </el-form-item>

                            <el-form-item label="邮箱" prop="mailbox">
                                <el-input type="text" v-model="cardForm.mailbox" :disabled="true"></el-input>
                            </el-form-item>

                            <el-form-item label="文化程度">
                                <el-select v-model="cardForm.diploma" placeholder="" :disabled="true">
                                    <el-option v-for="item in cultureOptions" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="身份证正面" prop="idCardUrlFront">
                                        <viewer :images="cardForm.idCardUrlFront">
                                            <img :src="cardForm.idCardUrlFront" class="viewer_img" />
                                        </viewer>
                                    </el-form-item>
                                    <el-form-item label="身份证反面" prop="idCardUrlReverse">
                                        <viewer :images="cardForm.idCardUrlReverse">
                                            <img :src="cardForm.idCardUrlReverse" class="viewer_img" />
                                        </viewer>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>

                        <div class="title">婚姻情况</div>

                        <div class="bgf">
                            <el-form-item label="婚姻情况">
                                <el-select v-model="cardForm.isMarried" placeholder="" :disabled="true">
                                    <el-option v-for="item in marriedOptions" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="配偶姓名">
                                <el-input type="text" v-model="cardForm.mateName" placeholder="" :disabled="true"></el-input>
                            </el-form-item>

                            <el-form-item label="配偶身份证">
                                <el-input type="text" v-model="cardForm.mateIdCard" placeholder="" :disabled="true"></el-input>
                            </el-form-item>

                            <el-form-item label="配偶联系方式">
                                <el-input type="text" v-model="cardForm.mateTelephone" placeholder="" :disabled="true"></el-input>
                            </el-form-item>

                            <el-form-item label="配偶月收入">
                                <el-input type="text" v-model="cardForm.mateIncome" placeholder="" :disabled="true"></el-input>
                            </el-form-item>

                            <el-form-item label="配偶工作单位">
                                <el-input type="text" v-model="cardForm.mateUnit" placeholder="" :disabled="true"></el-input>
                            </el-form-item>

                            <el-form-item label="居住情况">
                                <el-select v-model="cardForm.reside" placeholder="" :disabled="true">
                                    <el-option v-for="item in resideOptions" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="家庭月收入">
                                <el-input type="text" v-model="cardForm.houseMouthIncome" placeholder="" :disabled="true"></el-input>
                            </el-form-item>

                            <el-form-item label="家庭住址">
                                <el-input type="text" v-model="cardForm.houseAddress" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </div>

                        <div class="title">资产情况</div>

                        <div class="bgf">
                            <el-form-item label="是否有车">
                                <el-select v-model="cardForm.hasCar" placeholder="" :disabled="true">
                                    <el-option v-for="item in iscarOptions" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="车子型号">
                                <el-input type="text" v-model="cardForm.carModel" placeholder="" :disabled="true"></el-input>
                            </el-form-item>

                            <el-form-item label="车子购买日期">
                                <el-date-picker v-model="cardForm.buyCarDate" type="date" placeholder="" :disabled="true"> </el-date-picker>
                            </el-form-item>

                            <el-form-item label="车牌号">
                                <el-input type="text" v-model="cardForm.carNo" placeholder="" :disabled="true"></el-input>
                            </el-form-item>

                            <el-form-item label="车子情况">
                                <el-select v-model="cardForm.carstate" placeholder="" :disabled="true">
                                    <el-option v-for="item in carOptions" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="是否有房">
                                <el-select v-model="cardForm.hasHouse" placeholder="" :disabled="true">
                                    <el-option v-for="item in hasHouseOptions" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="房子情况">
                                <el-select v-model="cardForm.housestate" placeholder="" :disabled="true">
                                    <el-option v-for="item in carOptions" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="房子购买日期">
                                <el-date-picker v-model="cardForm.buyHouseDate" type="date" placeholder="" :disabled="true">
                                </el-date-picker>
                            </el-form-item>

                            <el-form-item label="房屋面积">
                                <el-input type="text" v-model="cardForm.houseArea" placeholder="" :disabled="true"></el-input>
                            </el-form-item>

                            <el-form-item label="房屋位置">
                                <el-input type="text" v-model="cardForm.houseLocation" placeholder="" :disabled="true"></el-input>
                            </el-form-item>

                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="上传行驶证正面">
                                        <viewer :images="cardForm.drivingLicenseUrl">
                                            <img :src="cardForm.drivingLicenseUrl" class="viewer_img" />
                                        </viewer>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="title">银行卡信息</div>
                        <div class="bgf">
                            <el-form-item label="卡号">
                                <el-input type="number" v-model="cardForm.bankCardNo" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="开户行">
                                <el-input type="text" v-model="cardForm.openingBank" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="银行卡正面">
                                        <viewer :images="cardForm.bankCardUrl">
                                            <img :src="cardForm.bankCardUrl" class="viewer_img" />
                                        </viewer>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="title">紧急联系人</div>
                        <div class="bgf">
                            <el-form-item label="姓名">
                                <el-input type="text" v-model="cardForm.emergencyContactName" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="电话">
                                <el-input
                                    type="number"
                                    v-model="cardForm.emergencyContactPhone"
                                    placeholder=""
                                    max-length="11"
                                    :disabled="true"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="关系">
                                <el-input
                                    type="text"
                                    v-model="cardForm.emergencyContactLocation"
                                    placeholder=""
                                    :disabled="true"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-form>
                </el-tab-pane>

                <!-- tab2 价值信息 -->
                <el-tab-pane label="填写价值信息" name="two">
                    <el-form
                        :model="valueForm"
                        :rules="valuerules"
                        :inline="true"
                        ref="valueruleForm"
                        label-width="100px"
                        class="demo-ruleForm form-group"
                        label-position="top"
                    >
                        <div class="title">规模</div>
                        <div class="bgf">
                            <el-form-item label="基地面积（亩）" prop="baseArea">
                                <el-input type="number" v-model="valueForm.baseArea" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="基地位置" prop="baseLocation">
                                <el-input type="text" v-model="valueForm.baseLocation" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="种植物品类" prop="plantspecies">
                                <el-input type="text" v-model="valueForm.plantspecies" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="种植年限" prop="plantYears">
                                <el-input type="number" v-model="valueForm.plantYears" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="种植数量" prop="plantNum">
                                <el-input type="number" v-model="valueForm.plantNum" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="每亩平均产量" prop="averageProduct">
                                <el-input type="text" v-model="valueForm.averageProduct" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </div>
                        <div class="title">租金情况</div>
                        <div class="bgf">
                            <el-form-item label="租金总额">
                                <el-input type="number" v-model="valueForm.rental" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="租金缴纳方式">
                                <el-input type="text" v-model="valueForm.rentPayWay" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="上传租恁合同(正面)">
                                        <viewer :images="valueForm.contractTenancy">
                                            <img :src="valueForm.contractTenancy" class="viewer_img" />
                                        </viewer>
                                    </el-form-item>
                                    <el-form-item label="上传房租缴纳凭证(正面)">
                                        <viewer :images="valueForm.payVoucher">
                                            <img :src="valueForm.payVoucher" class="viewer_img" />
                                        </viewer>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="title">基础设施情况</div>
                        <div class="bgf">
                            <el-form-item label="道路情况">
                                <el-select v-model="cardForm.hasHighWay" placeholder="" :disabled="true">
                                    <el-option v-for="item in hasHighWayOptions" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="道路建设投入">
                                <el-input type="text" v-model="valueForm.roadConstructionInto" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="水设施情况">
                                <el-input type="text" v-model="valueForm.waterFacility" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="水利建设投入">
                                <el-input type="text" v-model="valueForm.waterConstructionInto" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="基地仓库情况">
                                <el-input type="text" v-model="valueForm.baseWarehouse" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="仓库建设投入">
                                <el-input
                                    type="text"
                                    v-model="valueForm.warehouseConstructionInto"
                                    placeholder=""
                                    :disabled="true"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="基地建设情况">
                                <el-input type="text" v-model="valueForm.baseConstruction" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="基地建设投入">
                                <el-input type="text" v-model="valueForm.baseConstructionInto" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="加工配套情况">
                                <el-input
                                    type="text"
                                    v-model="valueForm.processSupportingFacility"
                                    placeholder=""
                                    :disabled="true"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="加工配套投入">
                                <el-input
                                    type="text"
                                    v-model="valueForm.processSupportingFacilityInto"
                                    placeholder=""
                                    :disabled="true"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-form>
                </el-tab-pane>

                <!-- tab3 能力信息 -->
                <el-tab-pane label="填写能力信息" name="three">
                    <el-form
                        :model="powerForm"
                        :rules="powerrules"
                        :inline="true"
                        ref="powerruleForm"
                        label-width="100px"
                        class="demo-ruleForm form-group"
                        label-position="top"
                    >
                        <div class="title">公司基础运营</div>
                        <div class="bgf">
                            <el-form-item label="公司员工数量" prop="staffNum">
                                <el-input type="number" v-model="powerForm.staffNum" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="公司专家数量" prop="expertNum">
                                <el-input type="number" v-model="powerForm.expertNum" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="月固定工资开支" prop="mouthSalarySpending">
                                <el-input type="number" v-model="powerForm.mouthSalarySpending" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="水费月均开支" prop="mouthWaterRateSpending">
                                <el-input
                                    type="number"
                                    v-model="powerForm.mouthWaterRateSpending"
                                    :disabled="true"
                                    placeholder=""
                                ></el-input>
                            </el-form-item>

                            <el-form-item label="电费月均开支" prop="mouthElectricRateSpending">
                                <el-input
                                    type="number"
                                    v-model="powerForm.mouthElectricRateSpending"
                                    placeholder=""
                                    :disabled="true"
                                ></el-input>
                            </el-form-item>

                            <el-form-item label="公司股东数量" prop="shareholderNum">
                                <el-input type="number" v-model="powerForm.shareholderNum" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="公司股东姓名" prop="shareholderNames">
                                <el-input type="text" v-model="powerForm.shareholderNames" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="公司股东占股情况" prop="shareholderRatio">
                                <el-input type="text" v-model="powerForm.shareholderRatio" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="上传水费缴纳凭证" prop="waterRatePayVoucher">
                                        <viewer :images="powerForm.waterRatePayVoucher">
                                            <img :src="powerForm.waterRatePayVoucher" class="viewer_img" />
                                        </viewer>
                                    </el-form-item>
                                    <el-form-item label="上传电费缴纳凭证" prop="electricRatePayVoucher">
                                        <viewer :images="powerForm.electricRatePayVoucher">
                                            <img :src="powerForm.electricRatePayVoucher" class="viewer_img" />
                                        </viewer>
                                    </el-form-item>
                                    <el-form-item label="上传营业执照" prop="businessLicense">
                                        <viewer :images="powerForm.businessLicense">
                                            <img :src="powerForm.businessLicense" class="viewer_img" />
                                        </viewer>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="title">基地管理情况</div>
                        <div class="bgf">
                            <el-form-item label="基地化肥使用年投入">
                                <el-input
                                    type="text"
                                    v-model="powerForm.baseChemicalFertilizerYearIncome"
                                    placeholder=""
                                    :disabled="true"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="基地农药使用年投入">
                                <el-input
                                    type="text"
                                    v-model="powerForm.basePesticideYearIncome"
                                    placeholder=""
                                    :disabled="true"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="基地临时工年费用">
                                <el-input type="text" v-model="powerForm.baseDaylaborerYearFee" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="基地种苗购买投入">
                                <el-input type="text" v-model="powerForm.baseGermchitBuyIncome" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </div>
                        <div class="title">基地收入情况</div>
                        <div class="bgf">
                            <el-form-item label="基地未来三年产量预估">
                                <el-input
                                    type="number"
                                    v-model="powerForm.baseFutureThreeYearOutput"
                                    placeholder=""
                                    :disabled="true"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="种植物每吨单价">
                                <el-input type="text" v-model="powerForm.plantsPertonPrice" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </div>
                        <div class="title">公司专利情况</div>
                        <div class="bgf">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="公司获得专利" style="width: 90%">
                                        <el-input
                                            type="textarea"
                                            v-model="powerForm.patentsOfCompany"
                                            :rows="2"
                                            placeholder=""
                                            :disabled="true"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="公司取得商标" style="width: 90%">
                                        <el-input
                                            type="textarea"
                                            v-model="powerForm.brandOfCompany"
                                            placeholder=""
                                            :disabled="true"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="上传专利">
                                        <viewer :images="powerForm.patentsUrl">
                                            <img :src="powerForm.patentsUrl" class="viewer_img" />
                                        </viewer>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-form>
                </el-tab-pane>

                <!-- tab4 历史信息 -->
                <el-tab-pane label="填写历史信息" name="four">
                    <el-form
                        :model="historyForm"
                        :rules="historyrules"
                        :inline="true"
                        ref="historyruleForm"
                        label-width="100px"
                        class="demo-ruleForm form-group"
                        label-position="top"
                    >
                        <div class="title">公司荣誉情况</div>

                        <div class="bgf">
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="公司获得荣誉" style="width: 90%">
                                        <el-input
                                            type="textarea"
                                            v-model="historyForm.honorOfCompany"
                                            placeholder=""
                                            :disabled="true"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row> </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="上传公司荣誉证书" style="width: 90%">
                                        <viewer :images="historyForm.honorCertificateOfCompany">
                                            <img :src="historyForm.honorCertificateOfCompany" class="viewer_img" />
                                        </viewer>

                                        <!-- <moreUpload
                                            :img="historyForm.honorCertificateOfCompany"
                                            @update="updateHonorCertificateOfManagementTeam"
                                        ></moreUpload> -->
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="公司管理团队获得荣誉" style="width: 90%">
                                        <el-input
                                            type="textarea"
                                            v-model="historyForm.honorOfManagementTeam"
                                            placeholder=""
                                            :disabled="true"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row> </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="上传公司管理团队获得荣誉">
                                        <viewer :images="historyForm.honorCertificateOfManagementTeam">
                                            <img :src="historyForm.honorCertificateOfManagementTeam" class="viewer_img" />
                                        </viewer>

                                        <!--                                         
                                        <moreUpload
                                            :img="historyForm.honorCertificateOfManagementTeam"
                                            @update="updateHonorCertificateOfManagementTeam"
                                        ></moreUpload> -->
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="title">公司信用情况</div>

                        <div class="bgf">
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="上传公司征信上传" style="width: 90%">
                                        <viewer :images="historyForm.creditInvestigationOfCompany">
                                            <img :src="historyForm.creditInvestigationOfCompany" class="viewer_img" />
                                        </viewer>
                                        <!-- <upload
                                            :img="historyForm.creditInvestigationOfCompany"
                                            @update="updateCreditInvestigationOfCompany"
                                        /> -->
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row> </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="上传公司法人征信上传">
                                        <viewer :images="historyForm.creditInvestigationOfLegalPerson">
                                            <img :src="historyForm.creditInvestigationOfLegalPerson" class="viewer_img" />
                                        </viewer>
                                        <!--                                         
                                        <upload
                                            :img="historyForm.creditInvestigationOfLegalPerson"
                                            @update="updateCreditInvestigationOfLegalPerson"
                                        /> -->
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-form>
                </el-tab-pane>

                <!-- tab5 关系信息 -->
                <el-tab-pane label="填写关系信息" name="five">
                    <el-form
                        :model="relationForm"
                        :rules="relationrules"
                        :inline="true"
                        ref="relationruleForm"
                        label-width="100px"
                        class="demo-ruleForm form-group"
                        label-position="top"
                    >
                        <div class="title">公司前三大经销商</div>

                        <div class="bgf">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="公司第一大经销商名称">
                                        <el-input
                                            type="text"
                                            v-model="relationForm.firstDealerName"
                                            placeholder=""
                                            :disabled="true"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="年均采购数量、金额">
                                        <el-input
                                            type="text"
                                            v-model="relationForm.firstDealerNum"
                                            placeholder=""
                                            :disabled="true"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="公司第二大经销商名称">
                                        <el-input
                                            type="text"
                                            v-model="relationForm.secondDealerName"
                                            placeholder=""
                                            :disabled="true"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="年均采购数量、金额">
                                        <el-input
                                            type="text"
                                            v-model="relationForm.secondDealerNum"
                                            :disabled="true"
                                            placeholder=""
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="公司第三大经销商名称">
                                        <el-input
                                            type="text"
                                            v-model="relationForm.thirdDealerName"
                                            :disabled="true"
                                            placeholder=""
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="年均采购数量、金额">
                                        <el-input
                                            type="text"
                                            v-model="relationForm.thirdDealerNum"
                                            placeholder=""
                                            :disabled="true"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="title">当地关系</div>

                        <div class="bgf">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="法人当地居住时间">
                                        <el-date-picker
                                            v-model="relationForm.legalPersonDwellTime"
                                            type="date"
                                            placeholder="选择日期"
                                            :disabled="true"
                                        >
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="公司当地成立时间">
                                        <el-date-picker
                                            v-model="relationForm.companySetUpTime"
                                            type="date"
                                            placeholder="选择日期"
                                            :disabled="true"
                                        >
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="公司是否获得经营权证">
                                        <el-select v-model="relationForm.hasManagerWarrant" placeholder="" :disabled="true">
                                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="公司是否属于当地龙头企业">
                                        <el-select v-model="relationForm.isLeadingEnterprise" placeholder="" :disabled="true">
                                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="title">法人关系</div>

                        <div class="bgf">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="法人入股公司名称">
                                        <el-input
                                            type="text"
                                            v-model="relationForm.legalPersonOfCompanyName"
                                            placeholder=""
                                            :disabled="true"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="占股比例">
                                        <el-input
                                            type="text"
                                            v-model="relationForm.ratioOfShareHolding"
                                            placeholder=""
                                            :disabled="true"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="法人简介" style="width: 80%">
                                        <el-input
                                            type="textarea"
                                            v-model="relationForm.legalPersonInfo"
                                            placeholder=""
                                            :disabled="true"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import API from '@/api';
import LoanMangerDetailsList from '../../components/LoanMangerDetailsList';
import upload from '../../components/upLoad';
import moreUpload from '../../components/upLoad';
import { DETAILS_INDEX_SEARCH_RESULT_ITEMS } from './config';
import { version } from 'element-ui';
import { mapGetters } from 'vuex';
import cloneDeep from 'lodash/cloneDeep';

export default {
    components: {
        LoanMangerDetailsList,
        upload,
        moreUpload
    },
    data() {
        return {
            //页面专用
            pageFlag: '',

            // tab切换专用
            activeName: 'first',
            active: 0,
            tabsList: ['还款操作', '填写身份信息', '填写价值信息', '填写能力信息', '填写历史信息', '填写关系信息'],

            //tab 1: 还款操作
            opForm: {
                type: '0',
                periods: '',
                dueDate: '',
                startMonth: ''
            },
            refundChecked: false,
            opFlag:true,
            resultColConfig: DETAILS_INDEX_SEARCH_RESULT_ITEMS,
            listLoading: false, // 数据列表显示状态
            dataList: [], //  数据列表

            /* 分页查询数据 */
            pageSize: 10,
            pageNum: 1,
            totalPage: 0,

            //tab 2: 身份信息
            cardForm: {
                bankCardNo: '', // 银行卡号
                openingBank: '', // 银行开户行
                drivingLicenseUrl: '', //行驶证图片
                idCardUrlFront: 'http://222.181.11.141:7081/byjz-ia/sys/file/showpic?id=92d7b7c862ed4a9b935ddf6c0c06f919', // 身份证正面
                idCardUrlReverse: 'http://222.181.11.141:7081/byjz-ia/sys/file/showpic?id=92d7b7c862ed4a9b935ddf6c0c06f919', //身份证反面
                username: '', //姓名
                idCard: '', //身份证号
                telephone: '', //联系电话
                mailbox: '', //邮箱
                register: '', //户籍所在地
                diploma: '', //文化程度
                mateUnit: '', //婚姻情况:配偶工作单位
                mateTelephone: '', //婚姻情况:配偶联系方式
                mateName: '', //婚姻情况:配偶姓名
                mateIncome: '', // 婚姻情况:配偶收入
                mateIdCard: '', //婚姻情况:配偶身份证号码
                houseAddress: '', //婚姻情况:家庭住址
                reside: '', // 婚姻情况:居住情况
                houseMouthIncome: '', // 婚姻情况:家庭月收入
                hasCar: '', // 是否有车
                carstate: '', // 车子情况
                carModel: '', //车子型号
                carNo: '', //资产情况:车牌号
                buyCarDate: '', //车子购买日期
                buyHouseDate: '', // 房子购买日期
                housestate: '', //:房子情况
                hasHouse: '', //是否有房
                houseArea: '', //房屋面积
                houseLocation: '', //房屋位置
                emergencyContactLocation: '', //紧急联系人:关系
                emergencyContactName: '', //紧急联系人:姓名
                emergencyContactPhone: '' //紧急联系人:电话
            },
            // 是否结婚
            marriedOptions: [
                {
                    value: '1',
                    label: '已婚'
                },
                {
                    value: '0',
                    label: '未婚'
                }
            ],
            // 居住情况
            resideOptions: [
                {
                    value: '自主房屋',
                    label: '自主房屋'
                },
                {
                    value: '租房',
                    label: '租房'
                }
            ],
            // 是否有房
            hasHouseOptions: [
                {
                    value: '0',
                    label: '无房'
                },
                {
                    value: '1',
                    label: '有房'
                }
            ],
            // 车子情况
            carOptions: [
                {
                    value: '全款',
                    label: '全款'
                },
                {
                    value: '按揭',
                    label: '按揭'
                }
            ],
            iscarOptions: [
                {
                    value: '0',
                    label: '无车'
                },
                {
                    value: '1',
                    label: '有车'
                }
            ],
            // 文化程度
            cultureOptions: [
                {
                    value: '博士',
                    label: '博士'
                },
                {
                    value: '研究生',
                    label: '研究生'
                },
                {
                    value: '本科',
                    label: '本科'
                },
                {
                    value: '大专',
                    label: '大专'
                },
                {
                    value: '中专',
                    label: '中专'
                },
                {
                    value: '高中',
                    label: '高中'
                },
                {
                    value: '初中',
                    label: '初中'
                },
                {
                    value: '小学',
                    label: '小学'
                },
                {
                    value: '成人教育',
                    label: '成人教育'
                }
            ],
            options: [
                {
                    value: '是',
                    label: '是'
                },
                {
                    value: '否',
                    label: '否'
                }
            ],
            hasHighWayOptions: [
                {
                    value: '0',
                    label: '无公路'
                },
                {
                    value: '1',
                    label: '有公路'
                }
            ],

            //tab 3: 价值信息
            valueForm: {
                baseLocation: '光电园001', //规模:基地位置
                baseArea: '32.45', //基地面积
                plantspecies: '56', //种植物品类
                plantYears: '100', //种植年限
                plantNum: '50', //规模:种植数量
                averageProduct: '60', //规模:每亩平均产量
                rentPayWay: '', //租金情况:租金缴纳方式
                rental: '', //租金情况:租金总额
                payVoucher: '', //房租缴纳凭证图片
                contractTenancy: '', //上传租恁合同
                hasHighWay: '', //是否有公路
                roadConstructionInto: '', //基础设施情况:道路建设投入
                waterFacility: '', //基础设施情况:水利设施情况
                waterConstructionInto: '', //基础设施情况:水利建设投入
                baseWarehouse: '', //基础设施情况:基地仓库情况
                warehouseConstructionInto: '', //仓库建设投入
                baseConstruction: '', //基地建设情况
                baseConstructionInto: '', //基地建设投入
                processSupportingFacility: '', //基础设施情况:加工配套情况
                processSupportingFacilityInto: '' //加工配套投入
            },

            // tab 4: 能力信息
            powerForm: {
                staffNum: '60', //公司员工数量
                expertNum: '70', //公司专家数量
                mouthSalarySpending: '100', //月固定工资
                mouthWaterRateSpending: '20', // 水费月均开支
                mouthElectricRateSpending: '30', // 公司基础运营:电费月均开支
                shareholderNames: '王小明', //公司基础运营:公司股东姓名
                shareholderNum: '60', //公司基础运营:公司股东数量
                shareholderRatio: '20', //公司基础运营:公司股东占股情况
                waterRatePayVoucher: '', //公司基础运营:水费缴纳凭证
                electricRatePayVoucher: '', //公司基础运营:电费缴纳凭证
                businessLicense: '', //公司基础运营:营业执照
                baseChemicalFertilizerYearIncome: '', //基地化肥使用年投入
                basePesticideYearIncome: '', //基地农药使用年投入
                baseDaylaborerYearFee: '', //基地农药使用年投入
                baseGermchitBuyIncome: '', //基地种苗购买投入
                baseFutureThreeYearOutput: '', //基地未来三年产量预估
                plantsPertonPrice: '', //种植物每吨单价
                patentsOfCompany: '', //公司获得专利
                brandOfCompany: '' //公司获得的商标
            },

            // tab 5: 历史信息
            historyForm: {
                honorCertificateOfCompany: '', //上传公司荣誉证书
                honorCertificateOfManagementTeam: '', //上传团队荣誉证书
                honorOfCompany: '', //公司获得荣誉
                honorOfManagementTeam: '', //公司管理团队获得荣誉
                creditInvestigationOfCompany: '', //公司征信上传
                creditInvestigationOfLegalPerson: '' //公司法人征信上传
            },
            historyrules: {},

            // tab 6: 关系信息
            relationForm: {
                firstDealerName: '', //公司第一大经销商名称
                firstDealerNum: '', //第一大经销商年均采购数量、金额

                secondDealerName: '', //公司第二大经销商名称
                secondDealerNum: '', //第二大经销商年均采购数量、金额

                thirdDealerNum: '', //第三大经销商年均采购数量、金额
                thirdDealerName: '', //公司第三大经销商名称

                legalPersonDwellTime: '', //法人当地居住时间
                companySetUpTime: '', //公司当地成立时间
                isLeadingEnterprise: '', //:公司是否属于当地龙头企业
                hasManagerWarrant: '', //公司是否获取经营权证

                legalPersonInfo: '', //法人简介
                legalPersonOfCompanyName: '', //法人入股公司名称
                ratioOfShareHolding: '' //占股比例
            },
            relationrules: {},
            cardUpUrl: this.baseUrl + '/sys/file/uploadIdCard',
            loading: false,
            isEditPage: true, //是否是编辑页面
            pageId: ''
        };
    },

    watch: {
        //- 解决 同一页面，数据不刷新问题

        // 监听相同路由下参数变化的时候，从而实现异步刷新
        $route(to, from) {
            this.nickname = this.$route.query.nickname; //修改页面标题
        }
    },

    mounted() {
        var itemData = this.$route.query.itemData;
        this.pageId = itemData.id;
        this.getDetail(itemData.id);
        this.getOpDetail(itemData.id);
        this.getOpList(itemData.id);
    },
    methods: {
        // 获取编辑详情

        getDetail(id) {
            let params = {
                id: id //消息主键
            };

            var _that = this;
            API.publicProcessApproval.getAuditDetails(params).then((res) => {
                console.log(res);
                if (res.code == '0000') {
                    var data = res.result;
                    var cardForm = _that.cardForm; // 基本信息
                    var valueForm = _that.valueForm; // 价值信息
                    var powerForm = _that.powerForm;
                    var historyForm = _that.historyForm;
                    var relationForm = _that.relationForm;

                    Object.keys(cardForm).forEach((key) => {
                        console.log(key);
                        cardForm[key] = data[key];
                    });

                    //身份信息 ：选择处理
                    if (_that.cardForm.isMarried === 0) {
                        //婚姻情况
                        _that.cardForm.isMarried = '0';
                    } else if (_that.cardForm.isMarried === 1) {
                        _that.cardForm.isMarried = '1';
                    }

                    if (_that.cardForm.hasCar === 0) {
                        //是否有车
                        _that.cardForm.hasCar = '0';
                    } else if (_that.cardForm.hasCar === 1) {
                        _that.cardForm.hasCar = '1';
                    }

                    if (_that.cardForm.hasHouse === 0) {
                        //是否有房
                        _that.cardForm.hasHouse = '0';
                    } else if (_that.cardForm.hasHouse === 1) {
                        _that.cardForm.hasHouse = '1';
                    }

                    Object.keys(relationForm).forEach((key) => {
                        console.log(key);
                        relationForm[key] = data[key];
                    });
                    Object.keys(valueForm).forEach((key) => {
                        console.log(key);
                        valueForm[key] = data[key];
                    });

                    //价值信息：选择处理
                    if (_that.valueForm.hasHighWay === 0) {
                        //道路情况
                        _that.valueForm.hasHighWay = '0';
                    } else if (_that.valueForm.hasHighWay === 1) {
                        _that.valueForm.hasHighWay = '1';
                    }
                    
                    Object.keys(powerForm).forEach((key) => {
                        console.log(key);
                        powerForm[key] = data[key];
                    });
                    Object.keys(historyForm).forEach((key) => {
                        console.log(key);
                        historyForm[key] = data[key];
                    });
                    _that.cardForm = cardForm;
                    _that.valueForm = valueForm;
                    _that.powerForm = powerForm;
                    _that.historyForm = historyForm;
                    _that.relationForm = relationForm;
                }
                _that.loading = false;
            });
        },

        //查看合同
        downContract() {
            window.location.href =
                window.baseUrl + '/sys/file/new/down?TOKEN=' + sessionStorage.getItem('token') + '&id=' + this.zjfShowContractId;
        },

        // 选 项卡切换
        tabsHandClick(index) {
            this.active = index;
            if (this.$refs.powerruleForm) {
                this.$refs.powerruleForm.clearValidate();
            }
            if (this.$refs.ruleForm) {
                this.$refs.ruleForm.clearValidate();
            }
            if (this.$refs.historyruleForm) {
                this.$refs.historyruleForm.clearValidate();
            }
            if (this.$refs.relationruleForm) {
                this.$refs.relationruleForm.clearValidate();
            }
            if (this.$refs.valueruleForm) {
                this.$refs.valueruleForm.clearValidate();
            }
        },

        closePage() {
            this.$router.go(-1);
        },
        radioChange(){

          if(this.opForm.type=='0'){
              this.opForm.periods='1';
          }

        },

        //还款配置 ，保存按钮
        opSave() {
            let params = cloneDeep(this.opForm);
            params.startMonth= params.startMonth +'-'+ params.dueDate;
 
            API.postLoanManger.opPostLoanInfo(params).then((data) => {
                if (data.code == '0000') {
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {
                             
                             //不能操作
                             this.opFlag=true;
                        }
                    });
                }
            });
        },
        //还款操作
        oprefundCheck(){
            let params={
                id:this.pageId
            };
            API.postLoanManger.opRefund(params).then((data) => {
                if (data.code == '0000') {
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1500
                    });
                }
            });


        },

        // 分页器发生改变 触发事件
        paginationChange(page) {
            this.pageSize = page.pageSize;
            this.pageNum = page.pageNo;
            this.getOpList();
        },

        // 获取 还款配置
        getOpDetail(listId) {

            var _that=this;
            let params = {
                id: listId
            };
            API.postLoanManger.getOpPostLoanInfo(params).then((data) => {
                if (data.code == '0000') {
                    _that.opForm = data.result;
                    
                    //还款类型处理
                    if(_that.opForm.type!=null&&_that.opForm.type!==''){
                       _that.opForm.type=''+_that.opForm.type;
                    }

                    //还款月份 截取
                    if(_that.opForm.startMonth!=null&&_that.opForm.startMonth!==''){
                      var startMonthStr=_that.opForm.startMonth.substring(0,_that.opForm.startMonth.length-3);
                      console.log("截取的字符串：",startMonthStr);
                      _that.opForm.startMonth=startMonthStr;
                    }

                    //是否能操作 ，还款配置 isSave 0是可以，1是不可以
                    if(data.result.isSave!=null&&data.result.isSave!==''){
                        if(data.result.isSave == 0){

                            _that.opFlag=false;

                        }else{
                            _that.opFlag=true;
                        }
                       
                    }
                    
                }
            });
        },
        // 获取 还款情况列表 接口
        getOpList(listId) {
            var _that = this;
            let params = {};
            params.id=listId;
            params.pageNum = _that.pageNum;
            params.pageSize = _that.pageSize;

            _that.listLoading = true;

            API.postLoanManger.getDetailsOpList(params).then((res) => {
                console.log(res);

                _that.listLoading = false;
                _that.totalPage = res.result.total;
                _that.dataList = res.result.rows;
                _that.$set(this.$refs.multipleTable['pageParams'], 'total', res.result.total);
                _that.$forceUpdate();
            });
        }
    }
};
</script>
<style  scoped>
.title {
    line-height: 35px;
    font-size: 16px;
    color: #4a4a4a;
    position: relative;
    margin-left: 50px;
    margin-top: 20px;
}
.title::before {
    position: absolute;
    width: 5px;
    height: 20px;
    background: #349DFB;
    border-radius: 2px;
    content: ' ';
    top: 6px;
    left: -10px;
}

.bgf {
    background: #ffffff;
    width: 1080px;
    padding: 20px;
    margin: 10px auto;
}

.form-group {
    width: 1200px;
}

.form-group .el-input__inner {
    width: 219px;
    line-height: 32px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding-left: 10px;
    box-sizing: border-box;
}
.form-group .el-form-item__label {
    margin-bottom: 0;
    padding-bottom: 0;

    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
}
.form-group .el-form-item {
    margin-right: 32px;
}

.form-group .el-textarea {
    width: 100%;
}
.form-group .el-textarea__inner {
    width: 100%;
}

.viewer_img {
    position: relative;
    width: 100px;
    height: 100px;
}
</style>